<template>
  <div class="container">
    <el-breadcrumb separator="">
      <el-breadcrumb-item><div class="div1">采购管理</div></el-breadcrumb-item>
      <el-breadcrumb-item
        ><div class="div2">异常入库列表</div></el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="eltabs" style="margin-top: 10px">
      <el-tabs v-model="tabName" @tab-click="handleClick">
        <el-tab-pane label="拒收中" name="0"></el-tab-pane>
        <el-tab-pane label="被退货中" name="1"></el-tab-pane>
        <el-tab-pane label="退货中" name="2"></el-tab-pane>
        <el-tab-pane label="已完成" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 面包屑导航 default-expand-all -->
    <div class="content">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick1">
        <el-tab-pane label="微商" name="1"></el-tab-pane>
        <el-tab-pane label="客服" name="2"></el-tab-pane>
        <el-tab-pane label="品牌" name="3"></el-tab-pane>
        <el-tab-pane label="内部出库" name="4"></el-tab-pane>
      </el-tabs>
      <div class="query">
        <div style="margin: 10px; font-size: 14px; color: #2d7edf">
          数据查询
        </div>
        <el-form :model="queryForm" label-width="80px" ref="queryForm">
          <!-- <el-form-item class="formItem" label="地址">
            <levelAddr
              class="addressContent"
              :province="queryForm.province"
              :city="queryForm.city"
              :area="queryForm.area"
              @updateprovice="getAddrData"
              @updatecity="getCity"
              @updatearea="getArea"
              :addr="queryForm"
            ></levelAddr>
          </el-form-item> -->
          <el-form-item class="formItem" label="订单编号" prop="orderId">
            <el-input
              placeholder="请输入订单编号"
              v-model="queryForm.orderId"
            ></el-input>
          </el-form-item>
          <el-form-item class="formItem" label="退货物流" prop="logisticsId">
            <el-input
              placeholder="请输入包裹单号"
              v-model="queryForm.logisticsId"
            ></el-input>
          </el-form-item>
          <el-form-item class="formItem" label="日期" prop="date">
            <el-date-picker
              v-model="queryForm.date"
              size="mini"
              style="width: 220px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy- MM- dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-button
            style="margin-left: 10px"
            size="mini"
            type="primary"
            @click="onSubmit"
            >搜索</el-button
          >
          <el-button
            style="margin-left: 10px"
            size="mini"
            @click="resetForm('queryForm')"
            >重置</el-button
          >
        </el-form>
      </div>
    </div>
    <div class="tableData" style="margin-top: 10px">
      <el-table
        highlight-current-row
        :data="tableData.list"
        :header-cell-style="{ textAlign: 'center' }"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <div class="border">
              <div style="color: #4168e7">
                <el-table
                  :data="props.row.orderCommodityList"
                  :header-cell-style="{ textAlign: 'center', color: '#333' }"
                  style="width: 100%"
                  border
                >
                  <el-table-column label="商品信息" min-width="500px">
                    <template slot-scope="scope">
                      <div
                        style="
                          display: flex;
                          justify-content: flex-start;
                          align-items: center;
                        "
                      >
                        <el-image
                          style="
                            width: 100px;
                            height: 100px;
                            margin-right: 50px;
                          "
                          :src="img(scope.row.image)"
                          fit="cover"
                        ></el-image>
                        <span
                          >{{ scope.row.brandName }} {{ scope.row.name }} ￥{{
                            scope.row.price
                          }}/盒</span
                        >
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="100px" label="正常收货">
                    <template slot-scope="c">
                      {{ c.row.normalNumber }}件
                    </template>
                  </el-table-column>
                  <el-table-column min-width="100px" label="破损收货">
                    <template slot-scope="c">
                      {{ c.row.damagedNumber }}件
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <div>
                <el-table
                  :data="props.row.orderComplimentaryList"
                  :header-cell-style="{ textAlign: 'center', color: '#333' }"
                  style="width: 100%"
                  border
                >
                  <el-table-column label="赠品信息" min-width="500px">
                    <template slot-scope="scope">
                      <div
                        style="
                          display: flex;
                          justify-content: flex-start;
                          align-items: center;
                        "
                      >
                        <el-image
                          style="
                            width: 100px;
                            height: 100px;
                            margin-right: 50px;
                          "
                          :src="img(scope.row.image)"
                          fit="cover"
                        ></el-image>
                        <span
                          >{{ scope.row.brandName }} {{ scope.row.name }} ￥{{
                            scope.row.price
                          }}/盒</span
                        >
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="100px" label="正常收货">
                    <template slot-scope="c">
                      {{ c.row.normalNumber }}件
                    </template>
                  </el-table-column>
                  <el-table-column min-width="100px" label="破损收货">
                    <template slot-scope="c">
                      {{ c.row.damagedNumber }}件
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" prop="orderId" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="包裹单号" prop="parcelNumber">
        </el-table-column>
        <el-table-column label="申请时间" prop="applyTime"></el-table-column>
        <el-table-column label="客服" prop="service"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span
              class="fontSty"
              @click="
                detail(scope.row.id, {
                  exType: scope.row.exType,
                  orderType: scope.row.orderType,
                })
              "
              >详情</span
            >
            <span
              v-if="tabName != 3"
              class="fontSty"
              style="margin-left: 20px"
              @click="addStorage(scope.row)"
              >入库</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <div class="block">
        <span class="demonstration">共{{ tableData.totalPage }}页</span>
        <span class="demonstration">共{{ tableData.totalNum }}条</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-sizes="[10, 20, 50, 100]"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
          layout="sizes,prev,pager,next,jumper"
        >
        </el-pagination>
      </div>
    </div>
    <div style="height: 50px"></div>
    <el-dialog
      modal-append-to-body
      append-to-body
      title="提交填写入库"
      :visible.sync="dialogVisible"
      width="800px"
      :before-close="handleClose"
    >
      <div class="diaContext">
        <el-tabs v-model="activeNum" type="card">
          <el-tab-pane label="商品" name="0">
            <div class="main" style="overflow: auto; height: 500px">
              <div
                class="context"
                v-for="item in selectData.orderCommodityList"
                :key="item.id"
              >
                <div class="title">
                  {{ item.brandName + " " + item.name }}
                </div>
                <div class="normalNumber">
                  <div class="title">
                    <span
                      style="color: #4168e7; font-size: 16px; font-weight: 500"
                      >正常商品入库</span
                    >
                    <span style="font-size: 14px">
                      可入库数{{ item.normalNumber }}件</span
                    >
                  </div>
                  <div
                    class="addStorge"
                    v-if="item.normalNumber"
                    style="
                      border-bottom: 1px solid #eee;
                      padding-left: 10px;
                      padding-left: 10px;
                    "
                  >
                    请选择仓库<el-select
                      collapse-tags
                      v-model="item.normalWarehouses"
                      style="
                        margin-left: 10px;
                        margin-bottom: 20px;
                        margin-top: 10px;
                      "
                      value-key="id"
                      clearable
                      multiple
                      placeholder="请选择仓库"
                      @change="selectClick1($event, item)"
                    >
                      <el-option
                        v-for="items in JSON.parse(JSON.stringify(op))"
                        :value="items"
                        :key="items.id"
                        :label="items.name"
                      ></el-option>
                    </el-select>
                    <div class="wareHouse">
                      <span
                        v-for="(items, index) in item.normalWarehouses"
                        :key="index"
                      >
                        <el-form>
                          <el-form-item :label="items.name">
                            <el-input
                              v-model="items.quantityStock"
                              placeholder="请输入商品库存"
                            ></el-input>
                          </el-form-item>
                          <el-form-item label="经手人">
                            <el-input
                              v-model="items.handledBy"
                              placeholder="请输入经手人"
                            ></el-input>
                          </el-form-item>
                        </el-form>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="damagedNumber">
                  <div class="title">
                    <span
                      style="color: #4168e7; font-size: 16px; font-weight: 500"
                      >破损商品入库</span
                    >
                    <span style="font-size: 14px">
                      可入库数{{ item.damagedNumber }}件</span
                    >
                  </div>
                  <div
                    class="addStorge"
                    v-if="item.damagedNumber"
                    style="border-bottom: 1px solid #eee; padding-left: 10px"
                  >
                    请选择仓库<el-select
                      collapse-tags
                      v-model="item.damagedWarehouses"
                      style="
                        margin-left: 10px;
                        margin-bottom: 20px;
                        margin-top: 10px;
                      "
                      value-key="id"
                      clearable
                      multiple
                      placeholder="请选择仓库"
                      @change="selectClick2($event, item)"
                    >
                      <el-option
                        v-for="items in JSON.parse(JSON.stringify(op))"
                        :value="items"
                        :key="items.id"
                        :label="items.damagedName"
                      ></el-option>
                    </el-select>
                    <div class="wareHouse">
                      <span
                        v-for="(items, index) in item.damagedWarehouses"
                        :key="index"
                      >
                        <el-form>
                          <el-form-item :label="items.damagedName">
                            <el-input-number
                              v-model="items.quantityStock"
                              :min="0"
                              :controls="false"
                              placeholder="请输入商品库存"
                            ></el-input-number>
                          </el-form-item>
                          <el-form-item label="经手人">
                            <el-input
                              v-model="items.handledBy"
                              placeholder="请输入经手人"
                            ></el-input>
                          </el-form-item>
                        </el-form>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="赠品" name="1">
            <div class="main" style="overflow: auto; height: 500px">
              <div
                class="context"
                v-for="item in selectData.orderComplimentaryList"
                :key="item.name"
              >
                <div class="title" style="font-weight: 700">
                  {{ item.brandName + " " + item.name }}
                </div>
                <div class="normalNumber">
                  <div class="title">
                    <span
                      style="color: #4168e7; font-size: 16px; font-weight: 500"
                      >正常商品入库</span
                    >
                    <span style="font-size: 16px">
                      可入库数{{ item.normalNumber }}件</span
                    >
                  </div>
                  <div
                    class="addStorge"
                    v-if="item.normalNumber"
                    style="border-bottom: 1px solid #eee; padding-left: 10px"
                  >
                    请选择仓库<el-select
                      collapse-tags
                      v-model="item.normalWarehouses"
                      style="
                        margin-left: 10px;
                        margin-bottom: 20px;
                        margin-top: 10px;
                      "
                      value-key="id"
                      clearable
                      multiple
                      placeholder="请选择仓库"
                      @change="selectClick1($event, item)"
                    >
                      <el-option
                        v-for="items in JSON.parse(JSON.stringify(op))"
                        :value="items"
                        :key="items.id"
                        :label="items.name"
                      ></el-option>
                    </el-select>
                    <div class="wareHouse">
                      <span
                        v-for="(items, index) in item.normalWarehouses"
                        :key="index"
                      >
                        <el-form>
                          <el-form-item :label="items.name">
                            <el-input
                              v-model="items.quantityStock"
                              placeholder="请输入商品库存"
                            ></el-input>
                          </el-form-item>
                          <el-form-item label="经手人">
                            <el-input
                              v-model="items.handledBy"
                              placeholder="请输入经手人"
                            ></el-input>
                          </el-form-item>
                        </el-form>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="damagedNumber">
                  <div class="title">
                    <span
                      style="color: #4168e7; font-size: 16px; font-weight: 500"
                      >破损商品入库</span
                    >
                    <span style="font-size: 14px">
                      可入库数{{ item.damagedNumber }}件</span
                    >
                  </div>
                  <div
                    class="addStorge"
                    v-if="item.damagedNumber"
                    style="border-bottom: 1px solid #eee; padding-left: 10px"
                  >
                    请选择仓库<el-select
                      collapse-tags
                      v-model="item.damagedWarehouses"
                      style="
                        margin-left: 10px;
                        margin-bottom: 20px;
                        margin-top: 10px;
                      "
                      value-key="id"
                      clearable
                      multiple
                      placeholder="请选择仓库"
                      @change="selectClick2($event, item)"
                    >
                      <el-option
                        v-for="items in JSON.parse(JSON.stringify(op))"
                        :value="items"
                        :key="items.id"
                        :label="items.damagedName"
                      ></el-option>
                    </el-select>
                    <div class="wareHouse">
                      <span
                        v-for="(items, index) in item.damagedWarehouses"
                        :key="index"
                      >
                        <el-form>
                          <el-form-item :label="items.damagedName">
                            <el-input-number
                              v-model="items.quantityStock"
                              :min="0"
                              :controls="false"
                              placeholder="请输入商品库存"
                            ></el-input-number>
                          </el-form-item>
                          <el-form-item label="经手人">
                            <el-input
                              v-model="items.handledBy"
                              placeholder="请输入经手人"
                            ></el-input>
                          </el-form-item>
                        </el-form>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      activeName: "1",
      activeNum: "0",
      tabName: "0",
      selectData: {},
      queryForm: {
        title: "",
        date: "",
        orderId: "",
        logisticsId: "",
        service: "",
      },
      tableData: {},
      expends: [],
      currentPage1: 1,
      selectPageSize: 10,
      op: [],
      ws: null,
    };
  },
  created () {
    this.axios.get("/order/comm/commodity/selectCommWarehouse").then((res) => {
      this.op = res.data;
    });
    this.getList();
  },
  activated () { },
  methods: {
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    handleSizeChange (e) {
      this.selectPageSize = e;
      this.getList();
    },
    detail (id, obj) {
      let orderType = "";
      let exType = "";
      if (this.tabName == 0) {
        exType = 1;
        orderType = 0;
      } else if (this.tabName == 1) {
        exType = 0;
      } else if (this.tabName == 2) {
        exType = 0;
        orderType = 1;
      } else if (this.tabName == 3) {
        exType = obj.exType;
        orderType = obj.orderType;
      }
      this.$router.push({
        name: "returned",
        query: {
          id: id,
          exType: exType,
          orderType: orderType ? orderType : undefined,
          fixDetail: 2,
        },
      });
    },
    submitClick () {
      this.totalCount();

      if (this.isSelectAll()) {
        for (let item of this.selectData.orderCommodityList) {
          for (let temp of item.normalWarehouses) {
            delete temp.createdTime;
            delete temp.updatedTime;
            temp.warId = temp.id;
          }
          for (let temp of item.damagedWarehouses) {
            delete temp.createdTime;
            delete temp.updatedTime;
            temp.warId = temp.id;
          }
        }
        for (let item of this.selectData.orderComplimentaryList) {
          for (let temp of item.normalWarehouses) {
            delete temp.createdTime;
            delete temp.updatedTime;
            temp.warId = temp.id;
          }
          for (let temp of item.damagedWarehouses) {
            delete temp.createdTime;
            delete temp.updatedTime;
            temp.warId = temp.id;
          }
        }
        // console.log(this.selectData.orderCommodityList);
        this.axios
          .post("/order/order/return/exceptionOrderIncoming/add", {
            exceptionCommodityRequests: this.selectData.orderCommodityList.filter(
              (res) => res.destroyNo + res.normalNo > 0
            ),
            exceptionComplimentaryRequests: this.selectData.orderComplimentaryList.filter(
              (res) => res.destroyNo + res.normalNo > 0
            ),
            oddNumber: this.selectData.orderId + "",
            type: this.tabName
          })
          .then((res) => {
            if (!res.code) {
              this.$message.success("申请成功");
              this.getList();
              this.dialogVisible = false;
            } else {
              this.$message.info(res.message);
            }
          });
      } else {
        this.$message.warning("请填写完整!");
      }
    },
    totalCount () {
      for (let item of this.selectData.orderCommodityList) {
        let destroyNo = 0; //破损数量
        let normalNo = 0; //正常数量
        for (let temp of item.normalWarehouses) {
          normalNo += Number(temp.quantityStock);
        }
        for (let temp of item.damagedWarehouses) {
          destroyNo += Number(temp.quantityStock);
        }

        item.normalNo = normalNo;
        item.destroyNo = destroyNo;
        item.unitPrice = item.price;
        item.commodityName = item.name;
        item.unit = item.specificationName;
        item.receive = item.logisticsCompany;
      }

      for (let item of this.selectData.orderComplimentaryList) {
        let destroyNo = 0; //破损数量
        let normalNo = 0; //正常数量
        for (let temp of item.normalWarehouses) {
          normalNo += Number(temp.quantityStock);
        }
        for (let temp of item.damagedWarehouses) {
          destroyNo += Number(temp.quantityStock);
        }
        item.normalNo = normalNo;
        item.destroyNo = destroyNo;
        item.unitPrice = item.price;
        item.commodityName = item.name;
        item.unit = item.specificationName;
        item.receive = this.selectData.logisticsCompany;
      }
    },
    isSelectAll () {
      let flag = true;
      for (let item of this.selectData.orderCommodityList) {
        let countD = 0;
        let countN = 0;
        item.damagedWarehouses.forEach(res => {
          countD += Number(res.quantityStock);
          if (!res.quantityStock) {
            flag = false;
          }
          if (res.handledBy == "" || !res.handledBy) {
            flag = false;
          }
        })
        item.normalWarehouses.forEach(res => {
          countN += Number(res.quantityStock);
          if (!res.quantityStock) {
            flag = false;
          }
          if (res.handledBy == "" || !res.handledBy) {
            flag = false;
          }
        })
        if (countN != item.normalNumber) {
          return false;
        }
        if (countD != item.damagedNumber) {
          return false;
        }

      }
      for (let item of this.selectData.orderComplimentaryList) {
        let countD = 0;
        let countN = 0;
        item.damagedWarehouses.forEach(res => {
          countD += Number(res.quantityStock);
          if (!res.quantityStock) {
            flag = false;
          }
          if (res.handledBy == "" || !res.handledBy) {
            flag = false;
          }
        })
        item.normalWarehouses.forEach(res => {
          countN += Number(res.quantityStock);
          if (!res.quantityStock) {
            flag = false;
          }
          if (res.handledBy == "" || !res.handledBy) {
            flag = false;
          }
        })

        if (countN != item.normalNumber) {
          return false;
        }
        if (countD != item.damagedNumber) {
          return false;
        }
      }
      return flag;
    },
    getList () {
      if (this.tabName != 3) {
        this.axios
          .post("/order/order/return/exceptionOrderIncoming/list", {
            pageNo: this.currentPage1,
            pageSize: this.selectPageSize,
            userType: this.activeName == 4 ? 5 : this.activeName,
            orderType: this.tabName,
            orderId: this.queryForm.orderId,
            startTime: this.queryForm.date[0],
            endTime: this.queryForm.date[1],
            orderStatus: "1",
          }, {
            timeout: 60000,
          })
          .then((res) => {
            this.tableData = res.data;
          });
      } else {
        this.axios
          .post("/order/order/return/exceptionAccomplishList/list", {
            pageNo: this.currentPage1,
            pageSize: this.selectPageSize,
            userType: this.activeName == 4 ? 5 : this.activeName,
            orderId: this.queryForm.orderId,
            startTime: this.queryForm.date[0],
            endTime: this.queryForm.date[1],
            orderStatus: "2",
          })
          .then((res) => {
            this.tableData = res.data;
          });
      }
    },
    selectClick1 (e1, e2) {
      e2.normalWarehouses = JSON.parse(JSON.stringify(e1));
      if (e2.normalWarehouses.length == 1) {
        e2.normalWarehouses[0].quantityStock = e2.normalNumber;
      }
      e2.normalWarehouses.forEach((res) => {
        res.handledBy = JSON.parse(
          sessionStorage.getItem("userInfo")
        ).reallyName;
      });
    },
    selectClick2 (e1, e2) {
      e2.damagedWarehouses = JSON.parse(JSON.stringify(e1));
      if (e2.damagedWarehouses.length == 1) {
        e2.damagedWarehouses[0].quantityStock = e2.damagedNumber;
      }
      e2.damagedWarehouses.forEach((res) => {
        res.handledBy = JSON.parse(
          sessionStorage.getItem("userInfo")
        ).reallyName;
      });
    },
    img (img) {
      return this.ImgHttps + img;
    },
    handleClose () {
      this.dialogVisible = false;
    },
    addStorage (e) {
      this.selectData = e;
      for (let item of this.selectData.orderCommodityList) {
        this.$set(item, "damagedWarehouses", []);
        this.$set(item, "normalWarehouses", []);
      }
      for (let item of this.selectData.orderComplimentaryList) {
        this.$set(item, "damagedWarehouses", []);
        this.$set(item, "normalWarehouses", []);
      }

      this.dialogVisible = true;
    },
    handleCurrentChange (e) {
      this.currentPage1 = e;
      this.getList();
    },
    onSubmit () {
      this.getList();
    },
    handleClick (tab, event) {
      this.tabName = tab.index;
      this.getList();
    },
    handleClick1 (tab, event) {
      this.activeName = tab.name;
      this.getList();
    },
    getAddrData (val) {
      this.queryForm.province = val;
    },
    getCity (val) {
      this.queryForm.city = val;
    },
    getArea (val) {
      this.queryForm.area = val;
    },
  },
};
</script>

<style scoped lang="scss">
.wareHouse {
  /deep/.el-form {
    justify-content: space-between;
    padding: 10px;
  }
}
/deep/.el-table__header {
  width: 100% !important;
}
/deep/.el-table__body {
  width: 100% !important;
}
span {
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
}
/deep/.el-table--enable-row-transition .el-table__body td {
  text-align: center;
}

/deep/.el-tabs__header {
  margin: 0;
  margin-bottom: 1px;
}
.div1 {
  background: url(../../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  background: url(../../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.div3 {
  margin-left: -8px;
  background: url(../../../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.diaContext {
  /deep/.el-input {
    width: 200px;
  }
  /deep/.el-input--suffix {
    width: 156px;
  }
  /deep/.el-form-item {
    width: 250px;
  }
  /deep/.el-form {
    display: flex;
  }
  .context {
    margin-bottom: 20px;
    .title {
      word-spacing: 10px;
      padding: 20px 10px;
      border-bottom: 1px solid #eee;
      font-size: 16px;
    }
  }
}
.tableData {
  /deep/.el-input__inner {
    width: 200px;
  }
  .border {
  }
  .fontSty {
    color: #4168e7;
    font-size: 15px;
    font-weight: 400;
  }
  .fontSty:hover {
    cursor: pointer;
    color: #224ee0;
  }
}
.eltabs {
  background: #fff;
  margin-bottom: 10px;
  padding: 0px 10px;
}
.content {
  background: #fff;
  padding: 10px;
  font-size: 15px !important;
  .formItem {
    display: inline-block;
  }
  /deep/.el-input > input {
    height: 30px;
  }
}
.page {
  text-align: right;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: -33px;
  background: #eee;
  z-index: 200;
  span {
    font-size: 15px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }
  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
</style>
